<!--@ 首页 -->
<template>
	<view class="padding-bottom bg-white" style="min-height: 100vh;">
		<load-flex :loading="loading"></load-flex>
		<u-notify ref="uNotify" />
		<!-- 表单部分 -->
		<view class="margin-lr text-lg  text-black">
			<view >
				<view class="padding-top  padding-bottom-sm">信用卡名称 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请输入..." v-model="model.cardName"
						placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			
			<view>
				<view class="padding-top padding-bottom-sm">信用卡卡号 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请输入..." v-model="model.cardBar"
						placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view>
				<view class="padding-top padding-bottom-sm">信用卡额度 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请输入..." v-model="model.carLimit"
						placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view>
				<view class="padding-top padding-bottom-sm">备用金 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请输入..." v-model="model.reserveFunds"
						placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view>
				<view class="padding-top padding-bottom-sm">目前总欠款 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请输入..." v-model="model.totalDebt"
						placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view @click="handCheck(1)">
				<view class="padding-top padding-bottom-sm">账单日 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请选择账单日" v-model="model.billingDate" disabled
						style="pointer-events: none;font-size: 28upx !important;background-color: #fff !important;"
						:key="time" placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view @click="handCheck(2)">
				<view class="padding-top padding-bottom-sm">逾期日期 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请选择逾期日期 " v-model="model.overdueDate" disabled
						style="pointer-events: none;font-size: 28upx !important;background-color: #fff !important;"
						:key="time" placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view>
				<view class="padding-top padding-bottom-sm">查询密码 <text class="text-red">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请输入..." v-model="model.queryPassword"
						placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view>
				<view class="padding-top padding-bottom-sm">备注 <text class="text-white">*</text></view>
				<view class="padding-sm solid radius">
					<input placeholder="请输入..." v-model="model.remarks"
						placeholder-style="font-size: 14px;color: #837f7f;"></input>
				</view>
			</view>
			<view class="radius15 bg-blue2 margin-top-xl cu-btn block lg" @click="loadData">
				提交
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" @confirm="ConfirmCheck" />
		<!-- <view class="padding-bottom  margin-lr  text-black">
			<view  class="padding-top padding-bottom-sm"><text
					class="text-red">*</text>项目信息</view>
			<u--textarea v-model="model.content" placeholder="请输入项目信息(包含项目规模和项目需求)"></u--textarea>
		</view> -->
	</view>
</template>
<script>
	window.addEventListener('popstate', function(event) {
	    // 阻止默认的返回行为
	    window.history.pushState(null, document.title, window.location.href);
	});
	import loadFlex from '@/components/loadFlex/loadFlex.vue' //加载框
	import myApi from '@/utils/app.js' //调用接口使
	export default {
		components: {
			loadFlex,
		},
		name: 'home',
		data() {
			return {
				model: {},
				loading: false,
				indexCheck: 0,
				time: '',
				userId:''
			}
		},
		
		onLoad() {
			// const local = window.location.href
						const local = 'http://szrswms.com/#/pages/assembly/assembly?id=1812701810445754369&clueId=1854758896704573441&orderNo=1854759087791804416'
			this.userId =  local.match(/id=([^?&]+)/)[1];
			this.model.phone  = local.match(/phone=([^?&]+)/)[1];
			
		},
		
		methods: {
			handCheck(index) { // 调用日期
				this.indexCheck = index
				this.$refs.calendar.open();
			},
			ConfirmCheck(e) { // 选择完日期返回过的值
				if (this.indexCheck == 1) this.model.billingDate = e.fulldate
				if (this.indexCheck == 2) this.model.overdueDate = e.fulldate
				this.time = new Date().valueOf()
			},
			async loadData() {
				
				console.log(this.userId)
				if (!this.model.cardName) return this.onNotify({
					type: 'error',
					message: '请输入信用卡名称',
				})
				if (!this.model.cardBar) return this.onNotify({
					type: 'error',
					message: '请输入信用卡卡号',
				})
				if (!this.model.carLimit) return this.onNotify({
					type: 'error',
					message: '请输入信用卡额度',
				})
				if (!this.model.reserveFunds) return this.onNotify({
					type: 'error',
					message: '请输入备用金',
				})
				if (!this.model.totalDebt) return this.onNotify({
					type: 'error',
					message: '请输入目前总欠款',
				})
				if (!this.model.billingDate) return this.onNotify({
					type: 'error',
					message: '请选择账单日',
				})
				if (!this.model.overdueDate) return this.onNotify({
					type: 'error',
					message: '请选择逾期日期',
				})
				if (!this.model.queryPassword) return this.onNotify({
					type: 'error',
					message: '请输入查询密码',
				})
				try {
					const res = await this.$request({
						url: myApi.formCreditCardInfoAdd,
						method: 'post',
						data: {
							...this.model,
							inviter:this.userId
						}
					});
					console.log(res)
					if (res.code == 200) {
						this.onNotify({
							message: '提交成功'
						})
						setTimeout(() => (
							uni.reLaunch({
								url: '/pages/successful/successful'
							})), 400);
					}
				} catch (e) {
					// 失败执行
					console.log(`这个接口错误：${myApi.queryList}`)
				} finally {
					// 销毁执行
				}
			},
			onNotify(round) {
				this.$refs.uNotify.show({
					type: round.type ? round.type : 'success',
					message: round.message ? round.message : '删除成功',
					top: 50
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
page {
    /* 以下属性根据实际需要进行调整 */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
</style>